<template>
    <view>
        <view class="detail_swiper">
            <swiper autoplay circular indicator-dots>
                <!-- data-url 自定义方式属性传参 -->
                <swiper-item @click="handleImagePreview" :data-url="item.pics_mid" v-for="(item, index) in goodsObj.pics" :key="item.pics_id">
                    <image :src="item.pics_mid" mode="widthFix"></image>
                </swiper-item>
            </swiper>
        </view>

        <!-- 商品价格开始 -->
        <view class="goods_price">￥{{ goodsObj.goods_price }}</view>
        <!-- 商品价格结束 -->

        <!-- 商品名称&收藏开始 -->
        <view class="goods_name_row">
            <view class="goods_name">{{ goodsObj.goods_name }}</view>
            <view class="goods_collect">
                <text :class="'iconfont ' + (isCollect ? 'icon-shoucang1' : 'icon-shoucang')" @click="handleCollect"></text>
                <view class="collect_text">收藏</view>
            </view>
        </view>
        <!-- 商品名称&收藏结束 -->

        <!-- 图文详情开始 -->
        <view class="goods_info">
            <view class="goods_info_title">图文详情111</view>
            <view class="goods_info_content">
                <!-- 富文本渲染 -->
                <rich-text class="" :nodes="goodsObj.goods_introduce"></rich-text>
            </view>
        </view>
        <!-- 图文详情结束 -->

        <!-- 底部工具栏 -->
        <view class="btm_tool">
            <view class="tool_item">
                <view class="iconfont icon-kefu"></view>
                <view>客服</view>
                <button open-type="contact"></button>
                <!-- 障眼法写超链接 -->
            </view>
            <view class="tool_item">
                <view class="iconfont icon-fenxiang"></view>
                <view>分享</view>
                <button open-type="share"></button>
                <!-- 障眼法写超链接 -->
            </view>
            <navigator url="/pages/cart/index" open-type="switchTab" class="tool_item">
                <view class="iconfont icon-gouwuche"></view>
                <view>购物车</view>
            </navigator>
            <view class="tool_item btn_cart" @click="handleCartAdd">加入购物车</view>
            <view class="tool_item btn_buy">立即购买</view>
        </view>
    </view>
</template>

<script>
/**
 * 1.发送请求获取数据
 * 2.点击轮播图 预览大图
 *  1.给轮播图绑定点击事件
 *  2.调用小程序的api previewImage
 * 3.点击加入购物车
 *  1.先绑定点击事件
 *  2.获取缓存中的购物车数据  数组格式
 *  3.先判断 当前的商品是否已经存在于购物车
 *  4.已经存在 修改商品数据 执行购物车数量++ 重新把购物车数组填充回缓存中
 *  5.不存在于购物车的数组中 直接给购物车数组添加一个新元素 带上购买数量属性num 重新把购物车数组 填充回缓存中
 *  6.弹出提示
 * 4.商品收藏
 *  1.页面onShow的时候  加载缓存中的商品收藏的数据
 *  2.判断当前商品是不是被收藏
 *    1.是   改变页面图标
 *    2.不是  执行收藏操作
 *  3.点击商品收藏按钮
 *    1.判断该商品是否存在缓存数组中
 *    2.已经存在  把该商品删除
 *    3.不存在 把商品添加到收藏数组中 存入到缓存中即可
 */
import { request } from '../../request/index.js';
import regeneratorRuntime from '../../lib/runtime/runtime'; // 支持es7的js文件引入1123

export default {
    data() {
        return {
            goodsObj: {
                pics: [],
                goods_price: '',
                goods_name: '',
                goods_introduce: ''
            },
            isCollect: false
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    // onLoad: function (options) {
    //   const { goods_id } = options
    //   // console.log(options,goods_id)
    //   this.data.goods_id = goods_id
    //   this.getGoodsDetail(goods_id)
    // },
    onShow: function () {
        let pages = getCurrentPages(); // console.log(pages)

        let currentPage = pages[pages.length - 1].$vm; // console.log(currentPage)

        let options = currentPage.options;
        const { goods_id } = options;
        this.goods_id = goods_id;
        this.getGoodsDetail(goods_id);
    },
    methods: {
        // 商品对象  放大的商品预览图
        goodsPreImgObj: {},

        /**
         * 获取商品详情数据
         */
        async getGoodsDetail(goods_id) {
            // const res = await request({ url: '/goods/detail?goods_id=' + goods_id }) // 可以这么写
            const res = await request({
                url: '/goods/detail',
                data: {
                    goods_id
                }
            });
            this.goodsPreImgObj = res; // 优化前
            // this.setData({
            //   goodsObj: res
            // })

            console.log(res); // 1.获取缓存中的商品收藏的数组

            let collect = uni.getStorageSync('collect') || []; // 2.判断商品是否被收藏了

            let isCollect = collect.some((item) => item.goods_id === this.goodsPreImgObj.goods_id); //优化后

            this.setData({
                goodsObj: {
                    goods_price: res.goods_price,
                    goods_name: res.goods_name,
                    pics: res.pics,
                    // iphone部分手机不识别webp图片格式
                    // 最好找到后台让他修改
                    // 临时自己改 确保后台存在1.webp => 1.jpg
                    goods_introduce: res.goods_introduce.replace(/\.webp/g, '.jpg')
                },
                isCollect
            });
        },

        // 图片预览放大e
        handleImagePreview(e) {
            console.log(e);
            const imUrl = this.goodsPreImgObj.pics.map((item) => item.pics_mid);
            console.log(imUrl);
            const currentImg = e.currentTarget.dataset.url;
            uni.previewImage({
                current: currentImg,
                // 当前显示图片的http链接
                urls: imUrl // 需要预览的图片http链接列表
            });
        },

        // 点击加入购物车
        handleCartAdd() {
            // 1. 获取缓存中的购物车  如果没有缓存则给个空数组  getStorageSync 同步执行代码
            let cart = uni.getStorageSync('cart111') || []; // 2.判断商品对象是否存在于购物车数组中

            let index = cart.findIndex((item) => item.goods_id === this.goodsPreImgObj.goods_id);

            if (index === -1) {
                // 3.不存在 第一次添加
                this.goodsPreImgObj.num = 1;
                this.goodsPreImgObj.checked = true; // 购物车checkBox为选中状态

                cart.push(this.goodsPreImgObj);
            } else {
                // 4.已经存在购物车数据 执行num++
                cart[index].num++;
            } // 5.把购物车重新添加回缓存中

            uni.setStorageSync('cart111', cart); // 6.弹窗提示

            uni.showToast({
                title: '加入成功',
                icon: 'success',
                // duration: 2000,
                // true 防止用户手抖  疯狂点击按钮
                mask: true
            });
        },

        // 点击  商品收藏图标
        handleCollect() {
            let isCollect = false; // 1.获取缓存中的商品收藏数组

            let collect = uni.getStorageSync('collect') || []; // 2.判断该商品是否被收藏过

            let index = collect.findIndex((item) => item.goods_id === this.goodsPreImgObj.goods_id); // 3.当index != -1时  收藏过

            if (index !== -1) {
                // 能找到  已经收藏过了  在数组中删除该商品
                collect.splice(index, 1);
                isCollect = false;
                uni.showToast({
                    title: '取消成功',
                    icon: 'success',
                    mask: true
                });
            } else {
                // 没有收藏过
                collect.push(this.goodsPreImgObj);
                isCollect = true;
                uni.showToast({
                    title: '收藏成功',
                    icon: 'success',
                    mask: true
                });
            } // 4.把数组存入到缓存中

            uni.setStorageSync('collect', collect); // 5.刷新data中的属性

            this.setData({
                isCollect
            });
        }
    }
};
</script>
<style>
@import './main.css';
</style>
